<template>
  <div>
    <!-- this is check score page! -->
    <el-container class="manager-container">

      <el-main height="">
        <!-- Main content -->
        <!-- 面包屑 -->
        <!-- <div class="bg-breadcrumb">
          <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/teacher/teacherhomepage' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>教师打分管理</el-breadcrumb-item>
              <el-breadcrumb-item>打分页面</el-breadcrumb-item>
          </el-breadcrumb>
        </div> -->
        <el-button type="primary" size="medium" plain @click="goBack()">返回</el-button>

        <el-card style="margin-top: 20px;" shadow="always" :body-style="{ padding: '20px' }">
          <!-- card body -->
          <span class="base-info-title">课程编号：</span>{{ baseInfo.course_teacher_num }}
          <span class="base-info-title">&nbsp;&nbsp;课程名称：</span>{{ baseInfo.course_name }}
          <span class="base-info-title">&nbsp;&nbsp;开课学院：</span>{{ baseInfo.school_name }}
          <span class="base-info-title">&nbsp;&nbsp;开课专业：</span>{{ baseInfo.class_name }}
        </el-card>

        <el-card style="margin-top: 20px;" shadow="always" :body-style="{ padding: '20px' }">
          <!-- card body -->
          <!-- 学生列表 -->
          <el-table
            :data="studentScoreTable"
            style="width: 100%;"
            :header-cell-style="{background:'#F3F4F7'}"
            border>
            <el-table-column
              label="#"
              align="center"
              type="index">
            </el-table-column>
            <el-table-column
              label="学号"
              align="center"
              prop="student_num"
              width="">
            </el-table-column>
            <el-table-column
              label="姓名"
              align="center"
              prop="name"
              width="">
            </el-table-column>
            <el-table-column
              prop="class_name"
              align="center"
              label="学生专业">
            </el-table-column>
            <el-table-column
              label="更改时间"
              prop="update_time"
              align="center">
            </el-table-column>
            <el-table-column
              label="平时成绩"
              width="100"
              align="center">
              <template slot-scope="scope">
                {{ scope.row.usual_score || '-' }}
              </template>
            </el-table-column>
            <el-table-column
              label="考试成绩"
              width="100"
              align="center">
              <template slot-scope="scope">
                {{ scope.row.exam_score || '-' }}
              </template>
            </el-table-column>
            <el-table-column
              prop="final_score"
              label="综合成绩"
              align="center">
            </el-table-column>
            <el-table-column
              label="是否缺考"
              align="center">
              <template slot-scope="scope">
                {{ scope.row.is_absent === 0? '否' : '是' }}
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <el-pagination
            background
            style="float: right; padding: 10px;"
            :page-size="10"
            @current-change="handleCurrentChange"
            layout="total, prev, pager, next"
            :total="totalStudent">
          </el-pagination>

        </el-card>

      </el-main>

    </el-container>
  </div>
</template>

<script>
import { toDateString } from '@/utils/time.js'
export default {
  data () {
    return {
      // menuList: [
      //   {
      //     id: '1',
      //     name: '成绩查询'
      //     // path: '/manager/course'
      //   }, {
      //     id: '2',
      //     name: '成绩查卷申请'
      //   }, {
      //     id: '3',
      //     name: '等级考试成绩'
      //   }, {
      //     id: '4',
      //     name: '成绩认定'
      //   }
      // ],
      // iconsObject: {
      //   1: 'el-icon-user',
      //   2: 'el-icon-edit-outline',
      //   3: 'el-icon-tickets',
      //   4: 'el-icon-setting'
      // },
      // isCollapse: false,
      // activeMenu: '成绩查询',
      // 当前的这个打分记录的id主键
      id: 0,
      baseInfo: {},
      scoreRate: 0.6,
      studentScoreTable: [],
      // 所有的学生数
      totalStudent: 0,
      currentPage: 1
    }
  },
  created () {
    this.getScoreTable()
  },
  methods: {
    // 返回
    goBack () {
      // 去除所有的记录
      window.localStorage.clear()
      this.$router.push('/teacher/setscoreentry')
    },

    // 获取所有的参考学生列表
    async getScoreTable () {
      this.id = window.localStorage.getItem('examId')
      const { data: res } = await this.$http.post(`score/teacher/getStudentById?page=${this.currentPage - 1}&rows=10&id=${this.id}`)
      console.log(res)
      if (!res.state) return this.$message.error(res.msg)
      this.totalStudent = res.detail.studentScoreList.total
      this.baseInfo = res.detail.score
      this.studentScoreTable = this.foreachObj(res.detail.studentScoreList.list)
    },

    // 更改当前页
    handleCurrentChange (page) {
      this.currentPage = page
      this.getScoreTable()
    },

    // 对后端数据进行处理
    foreachObj (data) {
      data.map(item => {
        item.create_time = toDateString(item.create_time)
        item.update_time = toDateString(item.update_time)
        // 这里暂时全部传入字符串，也就是说每次需要parseInt
        if (item.exam_score) {
          item.examScore = item.exam_score
        }
        if (item.usual_score) {
          item.usualScore = item.usual_score
        }
      })
      return data
    }
  }
}
</script>

<style lang="less" scoped>
.manager-container {
  height: 90vh;
  background-color: #f0f1f7;

  .el-aside {
    background-color: #C0C4CC;

    .el-menu {
      border-right: none;
    }
  }

  .el-main {
    .base-info-title {
      color: rgb(63, 51, 51);
      font-weight: 800;
    }

    .rate /deep/ .el-input-group__prepend {
      // width: 200px;
      padding: 0 10px;
    }
  }
}
</style>
